<template>
    <div class="record-list">
        <!--没有答题记录-->
        <div v-if="state.baseData.submitCount === null" class="nothing">
            <img src="@/assets/img_nothing.png" alt="" />
        </div>
        <template v-if="state.baseData.submitCount > 0">
            <div class="banner">
                <div>
                    <p>
                        <label>{{ state.baseData.submitCount }}</label
                        >次
                    </p>
                    <p>提交次数</p>
                </div>
                <div class="col-line"></div>
                <div>
                    <p>
                        <label>{{ state.baseData.bestAccuracyRightCount }}</label
                        >/{{ state.baseData.bestAccuracyAllCount }}
                    </p>
                    <p>最佳成绩</p>
                </div>
            </div>
            <!-- 最后一次提交记录 -->
            <div class="exam-blank" style="margin-bottom: 10px">
                <div class="record-head">
                    <div class="bold-text">正确率：{{ state.baseData.recordListVO.accuracy }}</div>
                    <div class="red-text" @click="toRecord(state.baseData.recordListVO.recordId)">
                        详情 <van-icon name="arrow" />
                    </div>
                </div>
                <div class="record-time">
                    用时: {{ state.baseData.recordListVO.durationFormat }}｜ 提交时间:
                    {{ state.baseData.recordListVO.submitTime }}
                </div>
                <div class="question-list">
                    <div
                        class="question-item"
                        v-for="(item, index) in state.baseData.recordListVO.recordTopicItemList"
                        :key="index"
                        :class="{ error: item.isRight === 2 }">
                        {{ index + 1 }}
                    </div>
                </div>
            </div>
            <!-- 历史作答记录 -->
            <template v-if="state.recordList.length > 0">
                <div class="history-text">历史作答记录</div>
                <div>
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="finished && state.total > pageSize ? '- 已经到底了 -' : ''"
                        @load="getMoreDate">
                        <div
                            class="exam-blank"
                            v-for="(records, ind) in state.recordList"
                            :key="'record-' + ind">
                            <div class="record-head">
                                <div class="bold-text">正确率：{{ records.accuracy }}</div>
                            </div>
                            <div class="record-time">
                                用时: {{ records.durationFormat }} ｜ 提交时间:
                                {{ records.submitTime }}
                            </div>
                            <div class="question-list">
                                <div
                                    class="question-item"
                                    v-for="(item, index) in records.recordTopicItemList"
                                    :key="index"
                                    :class="{ error: item.isRight === 2 }">
                                    {{ index + 1 }}
                                </div>
                            </div>
                        </div>
                    </van-list>
                </div>
            </template>
        </template>
    </div>
</template>
<script setup>
import { apiRecordHead, apiRecordList } from '@/api/exam'
import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps(['examId'])

const router = useRouter()

const loading = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const pageSize = ref(20)

const state = reactive({
    baseData: {
        submitCount: 0,
        bestAccuracyRightCount: 0,
        bestAccuracyAllCount: 0,
        recordListVO: {
            recordTopicItemList: []
        }
    },
    recordList: [],
    total: 0
})

onBeforeMount(() => {
    document.querySelector('body').setAttribute('style', 'background:#f6f8fc;')
    getRecordHead(props.examId)
})

onBeforeUnmount(() => {})

// 获取答题记录
const getRecordHead = (id) => {
    apiRecordHead({
        examId: id
    }).then((res) => {
        state.baseData = res
        if (res.submitCount !== null && res.submitCount > 1) {
            getRecordList(props.examId)
        }
    })
}
// 获取历史记录
const getRecordList = (id) => {
    apiRecordList({
        examId: id,
        pageSize: pageSize.value,
        pageNum: pageNum.value
    }).then((res) => {
        state.recordList.push(...res.rows)
        state.total = res.total
        // 加载状态结束
        loading.value = false
        if (state.recordList.length >= res.total) {
            finished.value = true
        }
    })
}

// 加载更多
const getMoreDate = () => {
    pageNum.value++
    getRecordList(props.examId)
}

// 查看报告详情
function toRecord(recordId) {
    router.push({
        name: 'record',
        query: {
            id: recordId
        }
    })
}
</script>

<style scoped lang="scss">
.record-list {
    background: #f6f8fc;
    padding: 10px 1rem;
    .banner {
        line-height: 1.333rem;
        text-align: center;
        height: 4.133rem;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background-color: #ffffff;
        border-radius: 5px;
        color: #999999;
        .col-line {
            width: 1px;
            background: #ececec;
            height: 70%;
        }
        label {
            font-size: 1.467rem;
            color: #000000;
        }
    }
    .exam-blank {
        border-radius: 5px;
        padding: 10px;
        background-color: #ffffff;
        margin-top: 10px;
        .record-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bold-text {
                color: #333333;
                font-weight: bold;
                font-size: 0.933rem;
            }
            .red-text {
                color: #fd453d;
                font-size: 0.8rem;
            }
        }
        .record-time {
            font-size: 0.8rem;
            color: #999999;
        }
        .question-list {
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: start;
            flex-wrap: wrap;
            padding: 8px 0;
            gap: 12px;
            .question-item {
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 50%;
                border: 1px solid #0590ff;
                color: #0590ff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .error {
                border: 1px solid #fd453d;
                color: #fd453d;
            }
            .right {
                border: 1px solid #0590ff;
                color: #0590ff;
            }
        }
    }
    .history-text {
        color: #999999;
        font-size: 0.933rem;
    }
}
.loading-text {
    color: #969799;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.nothing {
    margin-top: 14rem;
    img {
        width: 9.333rem;
        height: 6.267rem;
        display: block;
        margin: 0 auto;
    }
}
</style>
